<template>
  <div>
    <el-row :span="4">
      <el-col :span="4">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
        </el-input>
        <el-tree
            class="filter-tree"
            :data="deptTree"
            :props="defaultDeptProps"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="handleNodeClicks"
            ref="tree">
        </el-tree>
      </el-col>

      <el-col :span="20">
        <!--&lt;!&ndash;  用户搜索框&ndash;&gt;-->
        <div v-if="topInputShow">
        <el-form :inline="true" class="demo-form-inline" align="left" >
          <el-form-item label="用户名称">
            <el-input v-model="SelectUser.userName" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="SelectUser.phonenumber" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择角色状态" v-model="SelectUser.status">
              <el-option
                  v-for="item in dictStatus"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
                style="width: 250px;"
                v-model="SelectUser.timeDate"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="终止时间"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-row>
          <el-form-item>
            <el-button @click="loadSysUserPage" style="background-color: #23C6C8" icon="el-icon-search">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          </el-form-item>
          </el-row>
        </el-form>
        </div>
        <!--    新增--;修改--删除--导入--;导出-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="onAddSysUser">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single"
                       @click="onUpdateSysUser">修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="BatchTips">
              删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" icon="el-icon-upload2" size="mini" @click="sysUserimport">导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" icon="el-icon-download" size="mini" @click="sysUserExport">导出</el-button>
          </el-col>
        </el-row>
        <el-row class="btn-circle" style="float: right">
          <el-button icon="el-icon-search" size="mini" circle @click="topInputShows"></el-button>
          <el-button icon="el-icon-refresh" size="mini" circle @click="refresh"></el-button>
        </el-row>

        <!--  用户数据列表-->
        <el-table :data=" sysUsers"
                  :header-row-style="{height:'50px'}"
                  id="userData"
                  :header-cell-style="{background:'#f5f7fa',padding:'0px'}"
                  :row-style="{height:'5px'}"
                  :cell-style="{padding:'0px'}"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="用户编号" align="center" prop="userId"/>
          <el-table-column label="用户名称" align="center" prop="userName"/>
          <el-table-column label="用户昵称" align="center" prop="nickName"/>
          <el-table-column label="部门" align="center" prop="dept.deptName"/>
          <el-table-column label="手机号码" align="center" prop="phonenumber"/>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.status"
                  active-value="0"
                  inactive-value="1"
                  @click.native="unpack(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ (scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="200">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="onUpdateSysUser(scope.row)">修改
              </el-button>
              <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="tips(scope.row.userId)"
                  >删除
              </el-button>
              <el-button
                  type="text"
                  icon="el-icon-key"
                  @click="handleResetPwd(scope.row)">重置
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--    分页-->
        <div class="block">
          <!--       触发事件 handleSizeChange表示方法-->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="current"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="size"
              layout="sizes, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
        <!--        用户添加对话框-->
        <el-dialog title="添加用户" :visible.sync="insertDialogFormVisible">
          <el-form :model="user" :rules="rules">
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户昵称" :label-width="formLabelWidth" prop="userName">
                  <el-input v-model="user.userName" autocomplete="off" placeholder="请输入用户昵称" @blur="checkUserName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="120">
                <el-form-item label="归属部门" placeholder="请选择归属部门" :label-width="formLabelWidth" prop="deptName">
                  <el-select
                      v-model="user.deptName"
                      clearable
                      placeholder="请选择"
                      @clear="handleClear"
                      ref="selectUpResId"
                  >
                    <el-option hidden :value="user.deptId" :label="deptName" >
                    </el-option>
                    <el-tree
                        :data="deptTree"
                        :props="defaultDeptProps"
                        :expand-on-click-node="false"
                        :check-on-click-node="true"
                        @node-click="handleNodeClick"
                    >
                    </el-tree>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phonenumber">
                  <el-input v-model="user.phonenumber" autocomplete="off" placeholder="请输入手机号码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                  <el-input v-model="user.email" autocomplete="off" placeholder="请输入邮箱地址称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="nickName">
                  <el-input v-model="user.nickName" autocomplete="off" placeholder="请输入用户名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">
                  <el-input v-model="user.password" autocomplete="off" placeholder="请输入用户密码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户性别" :label-width="formLabelWidth" placeholder="请选择" prop="userName">
                  <el-select v-model="user.sex">
                    <el-option
                        v-for="item in dictSex"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-radio v-model="user.status" label="0">正常</el-radio>
                  <el-radio v-model="user.status" label="1">停用</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="岗位" :label-width="formLabelWidth">
                  <el-select v-model="postIds" multiple placeholder="请选择">
                    <el-option
                        v-for="item in posts"
                        :key="item.postId"
                        :label="item.postName"
                        :value="item.postId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="角色" :label-width="formLabelWidth">
                  <el-select
                      v-model="roleIds"
                      multiple
                      collapse-tags
                      style="margin-left: 20px;"
                      placeholder="请选择">
                    <el-option
                        v-for="item in roles"
                        :key="item.roleId"
                        :label="item.roleName"
                        :value="item.roleId"
                        @change="changeRoleId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="remark">
                </el-input>
              </el-form-item>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="insertDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sysUserAdd">确 定</el-button>
          </div>
        </el-dialog>
        <!--用户修改对话框-->
        <el-dialog title="修改" :visible.sync="updateDialogFormVisible">
          <el-form :model="user" :rules="rules">
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户昵称" :label-width="formLabelWidth" prop="nickName">
                  <el-input v-model="user.nickName" autocomplete="off" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="120">
                <el-form-item label="归属部门" placeholder="请选择归属部门" :label-width="formLabelWidth" prop="deptName">
                  <el-select
                      v-model="user.deptName"
                      clearable
                      placeholder="请选择"
                      @clear="handleClear"
                      ref="selectUpResId"
                  >
                    <el-option hidden :value="user.deptId" :label="deptName">
                    </el-option>
                    <el-tree
                        :data="deptTree"
                        :props="defaultDeptProps"
                        :expand-on-click-node="false"
                        :check-on-click-node="true"
                        @node-click="handleNodeClick"
                    >
                    </el-tree>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phonenumber">
                  <el-input v-model="user.phonenumber" autocomplete="off" placeholder="请输入用户密码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                  <el-input v-model="user.email" autocomplete="off" placeholder="请输入邮箱地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户性别" :label-width="formLabelWidth">
                  <el-select v-model="user.sex">
                    <el-option
                        v-for="item in dictSex"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-radio v-model="user.status" label="0">正常</el-radio>
                  <el-radio v-model="user.status" label="1">停用</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="岗位" :label-width="formLabelWidth">
                  <el-select v-model="postIds" multiple placeholder="请选择">
                    <el-option
                        v-for="item in posts"
                        :key="item.postId"
                        :label="item.postName"
                        :value="item.postId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="角色" :label-width="formLabelWidth">
                  <el-select
                      v-model="roleIds"
                      multiple
                      collapse-tags
                      style="margin-left: 20px;"
                      placeholder="请选择">
                    <el-option
                        v-for="item in roles"
                        :key="item.roleId"
                        :label="item.roleName"
                        :value="item.roleId"
                        @change="changeRoleId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="user.remark">
                </el-input>
              </el-form-item>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updateDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sysUserUpdate">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
<!--&lt;!&ndash;    用户导入对话框&ndash;&gt;-->
<!--    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>-->
<!--      <el-upload-->
<!--          ref="upload"-->
<!--          :limit="1"-->
<!--          accept=".xlsx, .xls"-->
<!--          :headers="upload.headers"-->
<!--          :action="upload.url + '?updateSupport=' + upload.updateSupport"-->
<!--          :disabled="upload.isUploading"-->
<!--          :on-progress="handleFileUploadProgress"-->
<!--          :on-success="handleFileSuccess"-->
<!--          :auto-upload="false"-->
<!--          drag-->
<!--      >-->
<!--        <i class="el-icon-upload"></i>-->
<!--        <div class="el-upload__text">-->
<!--          将文件拖到此处，或-->
<!--          <em>点击上传</em>-->
<!--        </div>-->
<!--        <div class="el-upload__tip" slot="tip">-->
<!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据-->
<!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
<!--        </div>-->
<!--        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>-->
<!--      </el-upload>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitFileForm">确 定</el-button>-->
<!--        <el-button @click="upload.open = false">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {
  name: 'system/user/index',
  data() {
    return {
      //筛选部门
      filterText: '',
      //用户对象集合
      sysUsers: null,
      //树形结构部门对象集合
      deptTree: null,
      //岗位对象集合
      posts: null,
      //角色对象集合
      roles: null,
      //分页
      current: 1,
      size: 5,
      pages: 0,
      total: 0,
      roleIds: "", //添加时的角色id
      postIds: [],//添加时部门的ID
      ids: [],  //删除集合id
      single: true,  // 非单个禁用
      multiple: true,  // 非多个禁用
      resetPwBox: false,//隐藏重置密码弹窗
      topInputShow:true,
      //字典状态的联动
      dictStatus:"",
      //字典性别的联动
      dictSex:"",
      //添加方法修改方法绑定数据
      user: {
        userId: "",
        userName: "",
        nickName: "",
        deptName: "",
        phonenumber: "",
        status: "",
        createTime: "",
        timeDate: "",
        remark: "",
        postName: "",
        password:"",
      },
      //模糊查询的对象集合
      SelectUser: {
        userName: "",
        nickName: "",
        phonenumber: "",
        status: "",
        createTime: "",
        timeDate: "",
      },
      //修改弹窗回显绑定数据
      updateUser: {
        userId: "",
        userName: "",
        nickName: "",
        deptName: "",
        phonenumber: "",
        status: "",
        createTime: "",
        timeDate: "",
        remark: "",
        postName: "",
        postIds: "",
        roleIds: "",
      },

      //用户表属性
      userId: "",
      userName: "",
      nickName: "",
      deptName: "",
      phonenumber: "",
      status: "",
      createTime: "",
      timeDate: "",
      remark: "",
      password:"",
      deptId:"", //部门节点出现的id
      dialogFormVisible: "",
      //部门树列表子关系
      defaultDeptProps: {
        children: "childDept",
        label: "deptName",
      },
      insertDialogFormVisible: false,
      updateDialogFormVisible: false,
      formLabelWidth: "90px",//form表单输入框的宽度
      // // 用户导入参数
      // upload: {
      //   // 是否显示弹出层（用户导入）
      //   open: false,
      //   // 弹出层标题（用户导入）
      //   title: "",
      //   // 是否禁用上传
      //   isUploading: false,
      //   // 是否更新已经存在的用户数据
      //   updateSupport: 0,
      //   // 设置上传的请求头部
      //   headers: { Authorization: "Bearer " + getToken() },
      //   // 上传的地址
      //   url: process.env.VUE_APP_BASE_API + "/system/user/importData"
      // },
      //起始时间的事件
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "归属部门不能为空", trigger: "change" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          // {
          //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          //   message: "请输入正确的手机号码",
          //   trigger: "blur"
          // }
        ]
      },
      // 部门集合
      sysDeptList:[]

    }
  },
  watch: {
    //根据名称筛选部门表
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    //关键字过滤树节点
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },

    /** 查询用户列表 **/
    loadSysUserPage() {
      this.axios.get("/sysUser-page2?current=" + this.current + "&size=" +
          this.size + "&userName=" + this.SelectUser.userName + "&phonenumber=" + this.SelectUser.phonenumber
          + "&status=" + this.SelectUser.status + "&timeDate=" + this.SelectUser.timeDate + "&deptId="+this.deptId)
          .then(result => {
            if (result.data.code == 200) {
              this.total = result.data.data.total
              this.pages = result.data.data.pages
              this.sysUsers = result.data.data.records
            }
          })
      this.deptId=''
    },
    //查询树形部门列表
    loadDeptTree() {
      this.axios.get("dept-tree")
          .then(result => {
            console.log(result);
            this.deptTree = result.data.data;
          })
    },

    handleNodeClick(data) {
      // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.deptName = data.deptName
      this.user.deptName = data.deptName
      this.user.deptId = data.deptId;
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.selectUpResId.blur()
    },
    // 选择器配置可以清空选项，用户点击清空按钮时触发
    handleClear() {
      // 将选择器的值置空
      this.deptName = ''
      this.user.deptName = ''
    },
    changeRoleId(data) {
      console.log(data)
    },
    /** 分页事件**/
    handleSizeChange(val) {
      this.size = val;
      this.loadSysUserPage(this.current)
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadSysUserPage(this.current)
    },

    //获取岗位对象显示岗位下拉框
    loadPostName() {
      this.axios.get("/postName")
          .then(result => {
            console.log(result);
            this.posts = result.data.data;
          })
    },
    //获取角色对象显示角色下拉框
    loadroleName() {
      this.axios.get("roleName")
          .then(result => {
            console.log(result);
            this.roles = result.data.data
          })
    },
    //复选框的选择、选择一个时修改和删除按钮都显示 、 选择两个的时候只显示删除
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    //部门树筛选点击事件
    handleNodeClicks(data){
      console.log(data)
      this.deptId=data.deptId
      this.loadSysUserPage();
    },

    /** 新增**/
    sysUserAdd() {
      this.axios.post("sysUser", {user: this.user, roleId: this.roleIds, postId: this.postIds})
          .then(res => {
            this.loadSysUserPage(this.current);
            this.insertDialogFormVisible = false
          })
    },
    /** 修改**/
    sysUserUpdate() {
      this.axios.put("updateUser/", {user: this.user, roleId: this.roleIds, postId: this.postIds})
          .then(res => {
            this.loadSysUserPage(this.current);
            this.updateDialogFormVisible = false
          })
    },
    //打开修改对话框（数据回显点击事件）
    onUpdateSysUser(row) {
      this.user = row
      this.roleIds=[]
      this.postIds=[]
      for (const item of this.sysDeptList) {
          if (this.user.deptId==item.deptId){
            this.user.deptName=item.deptName
          }
      }
      for (const role of this.user.roles) {
        this.roleIds.push(role.roleId)
      }
      for (const post of this.user.posts) {
        this.postIds.push(post.postId)
      }
      this.updateDialogFormVisible = true
    },
    //打开添加对话框
    onAddSysUser() {
      this.empty()
      this.user.deptId=100
      this.user.deptName="智慧社区"
      this.roleIds=[2]
      this.postIds=[4]
      this.user.userName="zh"
      this.user.nickName="张三"
      this.user.sex="0"
      this.user.email="12345@qq.com"
      this.user.phonenumber="999999"
      this.user.password="123"
      this.user.status="0"
      this.insertDialogFormVisible = true;
      this.checkUserName()
    },
    //删除的判断
    tips(id, delFlagId) {
      this.delFlagId = delFlagId;
      this.id = id;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.sysUserDelete(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //批量删除的判断
    BatchTips(id, delFlagId) {
      this.delFlagId = delFlagId;
      this.id = id;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        // this.deleteRole(id);
        this.sysUserDeletes()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //根据id删除
    sysUserDelete(id) {
      this.id = id
      this.axios.delete("sysUser/" + this.id)
          .then(res => {
            if (res.data.code == 200) {
              this.loadSysUserPage(this.current)

            }
          })
    },

    /** 批量删除 **/
    sysUserDeletes() {
      this.axios.delete("sysUsers/" + this.ids)
          .then(res => {
            if (res.data.code == 200) {
              this.loadSysUserPage(this.current);
            }
          })
    },
    sysUserimport(){

    },
    // /** 导入按钮操作 */
    // handleImport() {
    //   this.upload.title = "用户导入";
    //   this.upload.open = true;
    // },
    // /** 下载模板操作 */
    // importTemplate() {
    //   importTemplate().then(response => {
    //     this.download(response.msg);
    //   });
    // },
    // // 文件上传中处理
    // handleFileUploadProgress(event, file, fileList) {
    //   this.upload.isUploading = true;
    // },
    // // 文件上传成功处理
    // handleFileSuccess(response, file, fileList) {
    //   this.upload.open = false;
    //   this.upload.isUploading = false;
    //   this.$refs.upload.clearFiles();
    //   this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
    //   this.loadSysUserPage();
    // },
    // // 提交上传文件
    // submitFileForm() {
    //   this.$refs.upload.submit();
    // },
    /** 导出**/
    sysUserExport() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.sysUsers; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {
          });
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = {raw: true};
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#userData").removeChild(fix), xlsxParam);
        document.querySelector("#userData").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#userData"), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    //重置查询数据
    reset() {
      this.userName = ""
      this.phonenumber = ""
      this.status = ""
      this.createTime = ""
      this.$router.go(0);
    },

    /** 重置密码按钮操作 */
    handleResetPwd(row) {
      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        this.updatePwd(row.userId,value)
        this.handleRest()
      }).catch(() => {});
    },
    updatePwd(userId,password){
      this.axios.put("userPwd/" + userId +"/" + password)
          .then(res=>{
            if(res.data.code == 200){
              this.loadSysUserPage(this.current)
            }
          })
    },
    //重置成功后的弹窗
    handleRest() {
      this.$message({
        message: '恭喜你，重置密码成功',
        type: 'success'
      });
    },

    //开关改变状态的方法
    unpack(row) {
      this.userOne = row;
      let status = row.status == "0" ? "启用" : "禁用";
      this.$confirm('是否要' + "" + status + "" + row.userName + '角色吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: status + '成功!',
        });
        this.updateStatus();
      }).catch(() => {
        if (row.status == "0") {
          row.status = "1"
        } else {
          row.status = "0"
        }
      });
    },
    //修改角色状态方法
    updateStatus() {
      let userId = this.userOne.userId;
      this.axios.put("user-status/" + userId)
          .then(res => {
            if (res.data.code == 200) {
              this.loadSysUserPage(this.current);
            }
          })
    },
    //用户状态,性别和字典联动
    LinkeageDictUser(){
      let typeName = "sys_normal_disable";
      let typeName2 = "sys_user_sex";
      this.axios.get("/sysDictData/getBySysDictTypeName/" + typeName)
          .then(res =>{
            this.dictStatus = res.data.data;
          })
      this.axios.get("/sysDictData/getBySysDictTypeName/" + typeName2)
          .then(res =>{
            this.dictSex = res.data.data;
          })
    },
    //清空数据显示
    empty() {
      this.user={
        userId: "",
        userName: "",
        nickName: "",
        deptName: "",
        phonenumber: "",
        status: "",
        createTime: "",
        timeDate: "",
        remark: "",
        postName: "",
        avatar: "",
      }
    },
    //隐藏搜索框
    topInputShows() {
      this.topInputShow = !this.topInputShow;
    },
    refresh() {
      this.$router.go(0)
    },
  //删除自己的禁用
  banSelect(user){
    let username = localStorage.getItem('username')
    if(username == user.userName){
      return true
    }else{
      return false
    }
  },
    //检查用户名是否重复
    checkUserName(){
      this.axios.get("/checkUserNameSame/"+this.user.userName)
          .then(result=>{
            console.log(result.data.data)
            if (result.data.data==false){

            }else {
              alert("用户名重复")
            }
          })
    },
  //   装载部门树
   loadSysDeptList(){
     this.axios.get("/sysDept/list")
         .then(result=>{
           this.sysDeptList=result.data.data
         })
   }


  },

  mounted() {
    this.loadSysUserPage(1);
    this.loadDeptTree()
    this.loadPostName()
    this.loadroleName()
    this.LinkeageDictUser()
    this.loadSysDeptList()

  },
}
</script>

<style scoped>
@import "@/assets/styles/reset.css";


</style>